<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    button {
      padding: 10px 20px;
      margin: 5px;
    }

    .da {
      width: 300px;
      height: 800px;
      background-color: aqua;
      border-radius: 50px;
    }

    .da2 {
      margin-left: 25px;
    }

    .zi {
      color: gray;
      font-size: 13px;
    }

    .tu1 {
      height: 130px;
      border-radius: 30px;
      margin-left: -23px;
      opacity: 0.9;
      background-image: url(https://tse2-mm.cn.bing.net/th/id/OIP-C.vHTDPx_go3T_0LUmrWRLnQHaEn?w=269&h=180&c=7&r=0&o=5&dpr=1.3&pid=1.7);
    }
  </style>
</head>

<body>
  <div class="da">
    <div class="da2">
      <div class="tu1">
        <p>郑州荥阳吾悦广场店><br><span class="zi">该店铺距离您4.3km</span></p>

        <h2>半天妖烤鱼点餐</h2>
      </div>

      <div>
        <img
          src="https://ts1.cn.mm.bing.net/th?id=OIP-C.Jlo_0k9HGOR9mO9iu-4aCQHaCU&w=247&h=150&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
          alt="">
        <p>青花椒烤鱼 - <span class="price">79</span>元</p>
        <button class="add-to-cart" data-dish="青花椒烤鱼">加入购物车</button>
      </div>
      <div>
        <img
          src="https://ts1.cn.mm.bing.net/th?id=OIP-C.J97kPPYaacmtmWt_yyt6ywHaEK&w=189&h=150&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
          alt="">
        <p>咖啡给喱嘎烤鱼 - <span class="price">79</span>元</p>
        <button class="add-to-cart" data-dish="咖啡给喱嘎烤鱼">加入购物车</button>
      </div>
      <div id="cart">
        <h3>购物车</h3>
        <ul id="cart-items"></ul>
        <p>总价：<span id="total-price">0</span>元</p>
      </div>

    </div>
  </div>

</body>
<script>
  $(document).ready(function () {

    $('.add-to-cart').click(function () {
      var dishName = $(this).data('dish');
      var dishPrice = parseFloat($(this).closest('div').find('.price').text());

      var cartItems = $('#cart-items');

      var existingItem = cartItems.find('li:contains("' + dishName + '")');
      if (existingItem.length > 0) {

        var quantity = parseInt(existingItem.data('quantity')) + 1;
        existingItem.data('quantity', quantity);
        existingItem.text(dishName + 'x' + quantity + ' - ￥' + (dishPrice * quantity));
      } else {

        cartItems.append('<li data-dish="' + dishName + '" data-quantity="1">' + dishName + 'x1 - ￥' + dishPrice + '</li>');
      }

      updateTotalPrice();
    });

    function updateTotalPrice() {
      var total = 0;
      $('#cart-items li').each(function () {
        var price = parseFloat($(this).text().match(/￥(\d+\.\d+)/)[1]);
        total += price;
      });
      $('#total-price').text(total);
    }
  });
</script>

</html>